<template>
	<view class="all">
		<view class="body">
			<view class="carp shr" style="margin-bottom: 30rpx;">
				<image src="https://s4.ax1x.com/2022/01/28/7vvqht.jpg" />
				<view class="shr_1">
					<text>里德纳 154 5875 5874</text>
					<text>河南省 郑州市 金水区 桐柏路街道</text>
					<text>金逸庄园3号楼4楼</text>
				</view>
				<image style="width: 30rpx;height: 40rpx;" src="@/static/img/ycfh.png" />
			</view>
			<view class="carp">
				<view class="carp_1_3">
					<view class="carp_2">
						<image src="https://s4.ax1x.com/2022/01/28/7vvqht.jpg" />
						<view class="carp_2_1">
							<text>实用的教学方法合教材</text>
							<text class="text2">人教版</text>
							<view class="carp_2_1_4">
								<view style="display: flex;align-items: center;">
									<image style="width: 35.07rpx;height: 35.07rpx;"
										src="../../../static/img/jfg.png" />
									<text>50.00</text>
								</view>
								<!-- <text>￥50.00</text> -->
								<text>x1</text>
							</view>
						</view>
					</view>
					<view class="xian"></view>
				</view>
				<text class="carp_1">支付信息</text>
				<view class="carp_4">
					<text>商品总价</text>
					<text>¥100.00</text>
				</view>
			<!-- 	<view class="carp_4">
					<text> 快递费</text>
					<text>¥100.00</text>
				</view>
				<view class="carp_4">
					<text>优惠券</text>
					<text>¥100.00</text>
				</view> -->
				<view class="carp_5">
					<text>实兑换：</text>
					<text>200.00积分</text>
				</view>
				<view class="xian">

				</view>
				<text class="carp_1">订单信息</text>
				<view class="carp_4">
					<text> 订单编号</text>
					<text>¥gtuyuijGIUPO18<text class="fuzhi" style="font-size: 26rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #E61E2A;
		opacity: 1;
		margin-left: 10rpx;" @click="fuzhi">复制</text></text>
				</view>
				<view class="carp_4">
					<text> 下单时间</text>
					<text> 2021-10-10 12:00:00</text>
				</view>
				<view class="carp_4">
					<text>兑换时间</text>
					<text> 2021-10-10 12:00:00</text>
				</view>
				<!-- <view class="carp_4">
					<text>订单备注：</text>
					<text> 2021-10-10 12:00:00</text>
				</view> -->
			</view>
			<!-- 		<view class="carp1" style="margin-top: 30rpx;" >
				<text class="carp_1">重要通知</text>
				<view class="xian">
					<u-read-more :toggle="true" show-height="200" open-text='关闭' close-text='展开' color='#FFB300'>
						<rich-text :nodes="content" />
					</u-read-more>
				</view>
			</view> -->
		</view>
		<view class="foot" v-if="data.type!='确定收货'">
			<text class="shanchu">取消订单</text>
			<text class="fukuan">立即付款</text>
		</view>

		<view class="foot" v-if="data.type=='确定收货'">
			<text class="shanchu" @click="logistics">查看物流</text>
			<text class="fukuan">确定收货</text>
		</view>
		<view class="foot" v-if="data.type=='删除订单'">
			<text class="shanchu">删除订单</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: '',
				content: `山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
								苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
								无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？`,
				data: {},
				background: {
					backgroundColor: '#38323E',
				}
			};
		},
		methods: {
			fuzhi() {
				this.$handleClipboardt('¥gtuyuijGIUPO18')
			},
			logistics() {
				uni.navigateTo({
					url: `./logistics?`
				})
			},
		},
		onLoad(e) {
			this.data = JSON.parse(e.data)
			console.log(this.data)
			this.type = this.data.xuan
		}
	}
</script>

<style lang="scss">
	.shr {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.shr_1 {
			width: 75%;

			text {
				display: inline-block;
			}

			text:nth-of-type(1) {
				font-size: 28rpx;
				font-family: HarmonyOS Sans;
				font-weight: 500;
				color: #333333;
				opacity: 1;
			}

			text:nth-of-type(2) {
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				line-height: 44rpx;
				color: #666666;
				opacity: 1;
			}

			text:nth-of-type(3) {
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				line-height: 44rpx;
				color: #333333;
				opacity: 1;
			}
		}

		image {
			width: 68rpx;
			height: 68rpx;
			border-radius: 100%;
		}
	}

	.carpf {
		border-radius: 8rpx;
		background-color: #FFFFFF;
		padding: 20rpx;

		.xian {
			margin: 30rpx 0 30rpx 0;
			height: 1rpx;
			background-color: #EFEFEF;

		}

	}

	.all {
		.foot {
			display: flex;
			padding-right: 50rpx;
			justify-content: flex-end;
			align-items: center;

			.fukuan {
				margin-left: 20rpx;
				display: inline-block;
				width: 200rpx;
				height: 68rpx;
				opacity: 1;
				border-radius: 44rpx;
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				text-align: center;
				line-height: 68rpx;
				background-color: #FFD500;
				color: #703F00;
				opacity: 1;
			}

			.shanchu {
				display: inline-block;
				width: 200rpx;
				height: 68rpx;
				border: 1rpx solid #AAAAAA;
				opacity: 1;
				border-radius: 44rpx;
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				text-align: center;
				line-height: 68rpx;
				color: #999999;
				opacity: 1;

			}

			position: fixed;
			bottom: 0;
			width: 100%;
			background-color: #FFFFFF;
			height: 98rpx;
		}

		.body {
			background-color: #F5F5F5;
			min-height: 1300rpx;
			padding: 30rpx;
			margin-bottom: 100rpx;

			.carp1 {
				border-radius: 8rpx;
				background-color: #FFFFFF;
				padding: 20rpx;

				.carp_1 {
					display: inline-block;
					margin-bottom: 5rpx;
					font-size: 34rpx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: #141414;
					opacity: 1;
				}
			}

			.carp {
				border-radius: 8rpx;
				background-color: #FFFFFF;
				padding: 20rpx;

				.carp_5 {
					text-align: right;
					margin-top: 40rpx;
					display: flex;
					justify-content: flex-end;

					text:nth-of-type(1) {
						font-size: 30rpx;
						font-family: HarmonyOS Sans;
						line-height: 30px;
						color: rgb(51, 51, 51);
						opacity: 1;
					}

					text:nth-of-type(2) {
						font-size: 30rpx;
						font-family: HarmonyOS Sans;
						font-weight: bold;
						line-height: 30px;
						color: #E61E2A;
						opacity: 1;
					}
				}

				.carp_4 {
					display: flex;
					justify-content: space-between;
					margin-top: 15rpx;

					text:nth-of-type(1) {
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #7B7B7B;
						opacity: 1;
					}

					text:nth-of-type(2) {
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #7B7B7B;
						opacity: 1;
					}
				}

				.xian {
					margin: 30rpx 0 30rpx 0;
					height: 1rpx;
					background-color: #EFEFEF;

				}

				.carp_2 {
					display: flex;
					justify-content: space-between;

					image {
						width: 185.26rpx;
						height: 185.26rpx;
						border-radius: 8rpx;
					}

					.carp_2_1 {
						width: 68%;

						text:nth-of-type(1) {
							display: block;
							font-size: 32rpx;
							font-family: Source Han Sans CN;
							font-weight: bold;
							color: #333333;
							opacity: 1;
						}

						.text2 {
							display: block;
							text-align: center;
							margin-top: 10rpx;
							width: 80rpx;
							background: #EEEFF1;
							border-radius: 4rpx;
							font-size: 20rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #91969A;
						}

						.carp_2_1_4 {
							display: flex;
							justify-content: space-between;
							position: relative;
							align-items: flex-end;
							top: 60rpx;

							text:nth-of-type(1) {
								display: block;
								font-size: 34rpx;
								font-family: HarmonyOS Sans;
								font-weight: bold;
								color: #D5212C;
								position: relative;
								opacity: 1;
							}

							text:nth-of-type(2) {
								font-size: 24rpx;
								font-family: HarmonyOS Sans;
								font-weight: 400;
								color: #91969A;
								opacity: 1;
							}
						}
					}
				}

				.carp_1 {
					display: inline-block;
					margin-bottom: 5rpx;
					font-size: 34rpx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: #141414;
					opacity: 1;
				}
			}
		}

		.top {
			padding: 20rpx 30rpx 30rpx 30rpx;
			background-color: #38323E;

			.top_1 {
				height: 329rpx;
				background-size: 100% 100%;
				background-repeat: no-repeat;

				.top_2 {
					margin-top: 30rpx;
					width: 273rpx;
					height: 58rpx;
					background: rgba(20, 20, 20, 0.1);
					border-radius: 0px 29px 29px 0px;
					line-height: 58rpx;
					text-align: center;

					text:nth-of-type(1) {
						font-size: 26rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #141414;
						opacity: 1;
					}

					text:nth-of-type(2) {
						font-size: 34rpx;
						font-family: HarmonyOS Sans;
						font-weight: bold;
						color: #D5212C;
						opacity: 1;
					}
				}

				.all_top_1_1 {
					padding: 30rpx;

					text:nth-of-type(1) {
						display: block;
						font-size: 36rpx;
						font-family: DOUYU Font;
						font-weight: normal;
						line-height: 44px;
						color: #FFB300;
						opacity: 1;

					}

					text:nth-of-type(2) {
						display: block;
						font-size: 26rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #141414;
						opacity: 0.5;

					}
				}
			}
		}

		.xian {
			// height: 1rpx;
			// background: #EFEFEF;
			// opacity: 1;
		}
	}
</style>
